<template>
	<div class="report">
	  <el-form :inline="true" :model="reportSearch" label-width="100px" style="min-width: 1200px;" class='searchForm'>
		<el-form-item label="报告名称">
			<el-input v-model="reportSearch.name" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="reset">重置</el-button>
			<el-button type="primary" @click="search">搜索</el-button>
		</el-form-item>
	  </el-form>
	  <el-table :data="report_list.results" class='table'>
		<el-table-column label="序号" width="70" type="index"/>
		<el-table-column label="报告名称" prop="name" min-width="100"/>
		<el-table-column label="执行环境" prop="run_env_name" min-width="100"/>
		<el-table-column label="用例总数" prop="all_case_number" min-width="100"/>
		<el-table-column label="成功用例数" prop="success_case_number" min-width="100"/>
		<el-table-column label="失败用例数" prop="fail_case_number" min-width="100"/>
		<el-table-column label="错误用例数" prop="error_case_number" min-width="100"/>
		<el-table-column label="执行人" prop="create_by_name"  min-width="70"/>
		<el-table-column label="用例开始时间" prop="create_time" sortable min-width="150"/>
		<el-table-column label="用例结束时间" prop="update_time" sortable min-width="150"/>
		<el-table-column label="执行进度"  align="left" min-width="150">
			<template #default="scope">
				  <el-tag v-if='(scope.row.success_case_number + scope.row.fail_case_number + scope.row.error_case_number)/scope.row.all_case_number === 1' effect="dark">已完成</el-tag>
			      <el-progress v-else :percentage="((scope.row.success_case_number + scope.row.fail_case_number + scope.row.error_case_number)/scope.row.all_case_number * 100).toFixed(2)"  :stroke-width="10" striped striped-flow/>
			</template>
		</el-table-column>
		<el-table-column align="center" min-width="100">
			<template #default="scope">
			  <el-button v-if="permission.has_edit_permission" :icon="View" size="small" type='primary' @click="view(scope.row)">查看</el-button>
			</template>
		</el-table-column>
	  </el-table>
	  <div style="margin: 10px">
	  	<el-pagination
	  	  v-model:current-page="page_size_params.page"
	  	  v-model:page-size="page_size_params.size"
	  	  :page-sizes="[10, 20, 30, 50]"
	  	  :small="small"
	  	  :disabled="disabled"
	  	  :background="background"
	  	  :hide-on-single-page="false"
	  	  layout="total, sizes, prev, pager, next, jumper"
	  	  :total="report_list.count"
	  	  @size-change="handleSizeChange"
	  	  @current-change="handleCurrentChange"
	  	/>
	  </div>
	</div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen} from '@element-plus/icons-vue'
import SuiteCondition from '../../components/SuiteCondition.vue'

export default{
	computed:{
		...mapState(['pathPermission', 'projectInfo', 'env_id']),
	},
	components: {
		SuiteCondition
	},
	data() {
		return {
			permission: {},
			reportSearch:{
				name: '',
				project: '',
			},
			page_size_params: {
				page: 1,
				size: 10,
			},
			count: 1,
			isAdd: true,
			editDialogVisible: false,
			report_list: [],
			plant_module_list: [],
			module_list: [],
			ViewVisible: false,
			runSuiteForm: {
				env_id: '',
				suite_id: '',
			},
			SuiteSave:{
				project: '',
				name: '',
				conditions: [],
			},
			role_names: [],
		}
	},
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
		}
	},
	methods:{
		...mapActions(['getRolePermission']),
		handleCurrentChange(){
			this.getReports()
		},
		handleSizeChange(){
			this.getReports()
		},
		view(row){
			this.$router.push({path: '/report/listView', query: {id: row.id}})
		},
		search(){
			this.getReports()
		},
		reset(){
			for(let key in this.reportSearch){
				this.reportSearch[key] = ''
			}
		},
		async createSuite(){
			this.SuiteSave.project = this.projectInfo.id
			const response = await this.$api.createSuite(this.SuiteSave)
			if(response.status === 201){
				this.editDialogVisible = false
				this.getSuites()
			}
		},
		async updateSuite(){
			this.SuiteSave.project = this.projectInfo.id
			const response = await this.$api.updateSuite(this.SuiteSave.id, this.SuiteSave)
			if(response.status === 200){
				this.editDialogVisible = false
				this.getSuites()
			}
		},
		async deleteSuite(id){
			const response = await this.$api.deleteSuite(id)
			if (response.status === 204){
				this.getSuites()
			}
		},
		async getSuite(id){
			const response = await this.$api.getSuite(id)
			if (response.status === 200){
				this.SuiteSave = {...response.data.result}
			}
		},
		async getReports(){
			this.reportSearch.project = this.projectInfo.id
			const response = await this.$api.getReports(Object.assign(this.reportSearch, this.page_size_params))
			if (response.status === 200){
				this.report_list = {...response.data}
			}
		},
	},
	created() {
		this.getRolePermission(this.pathPermission[this.$route.path]).then(res =>{
			this.permission = {...res.result}
		})
		this.getReports()
		
	}
}
</script>

<style scoped>
	.report{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.report .searchForm{
		width: 100%;
		flex: 1;
		background-color: white;
		padding: 15px 15px 0 15px;
		margin-bottom: 5px;
	}
	.report .el-form--inline .el-form-item{
		margin-bottom: 15px;
	}
	.report .table{
		background-color: white;
		flex: 1;
	}
	.searchForm .el-input{
		width: 150px;
	}
	.searchForm .el-select{
		width: 150px;
	}
	.dialog .el-input{
		width: 300px;
	}
	.dialog .el-select{
		width: 300px;
	}
	/deep/ .dialog .el-input__wrapper{
		width: 270px;
	}
	.form .el-select{
		width: 300px;
	}
	.el-button{
		width: 70px;
	}
	.el-icon{
		margin-left: 10px;
	}
	
</style>
